<template>
  <scroll-view
    class="scroll-view"
    refresher-enabled
    :refresher-triggered="isTriggered"
    scroll-y
    @refresherrefresh="downRefresh"
    @scrolltolower="upRefresh"
  >
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card :border="false" v-for="item in messageData" :key="item.id"> 
        <view class="brief">{{ item.content }}</view>
        <view class="extra">
          <text class="time">{{ item.created }}</text>
          <navigator
            hover-class="none"
            class="link"
            url="/subpkg_message/content/index"
            >查看详情</navigator
          >
        </view>
        <template v-slot:title>
          <view class="title unread">{{ item.title }}</view>
        </template>
      </uni-card>
      <view v-if="messageData" class="message-blank">暂无消息</view>
      <view v-if="+pages === +pageData.page" class="message-none">没有更多消息了~~~~</view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { getMessagesPage } from '../api'
  const isTriggered = ref(false) 
  const pageData = ref({
    contentType: 201,
    page: 1,
    pageSize: 4,
  })
  const pages = ref('') // 总页数

  const messageData = ref([]) // 渲染数据

  const messageApi = async () => {
    const res = await getMessagesPage(pageData.value)
    return res
  }

  onMounted(async () => {
    // 获取任务通知数据
    const res = await messageApi()
    messageData.value = res.data.items
    pages.value = res.data.pages // 总页数赋值
  })

  const upRefresh = async () => {
    // 上拉刷新
    if (pageData.value.page >= +pages.value) return // 判断当前页是否大于总页数
    pageData.value.page = pageData.value.page + 1 // 刷新后页面 +1
    const res = await messageApi()
    messageData.value = messageData.value.concat(res.data.items) // 添加获取到的数据
  }
  const downRefresh = async () => {
    // 下拉刷新
    console.log(1);
    isTriggered.value = true
    messageData.value = []
    pageData.value.page = 1
    const res = await messageApi()
    isTriggered.value = false
    messageData.value = res.data.items
  }
</script>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
